<template>
  <div class="mine">
    <div class="title">
      <div class="images">
        <img :src="user.avatar" alt="" />
      </div>
      <p>{{ user.nickName ? user.nickName : user.userName }}</p>
    </div>
    <van-cell title="修改账号密码" is-link @click="changepswd()" />
    <van-cell title="修改个人信息" is-link @click="changeinfo()" />
    <van-cell title="地址列表" is-link @click="addresses()" />
    <van-cell title="我的订单" is-link @click="order()" />
    <van-button type="danger" @click="quit">退出</van-button>
  </div>
</template>

<script>
import { getuser } from "@/api/user";
import { removeToken } from "@/util/auth";
import { Toast } from "vant";

export default {
  data() {
    return {
      user: {},
    };
  },
  computed: {},
  watch: {},

  methods: {
    quit() {
      removeToken();
      Toast.success("退出成功");
      setTimeout(() => {
        this.$router.replace({
          name: "Login",
        });
      }, 1000);
    },
    changepswd() {
      this.$router.push("changepswd");
    },
    changeinfo() {
      this.$router.push("changeinfo");
    },
    addresses() {
      this.$router.push("addresslist");
    },
    order() {
      this.$router.push("order");
    },
  },
  async created() {
    let res = await getuser();
    console.log(res);
    this.user = res;
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.title {
  width: 100%;
  height: 20%;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 1px;
  background-image: linear-gradient(
    180deg,
    rgba(207, 232, 255, 1) 0,
    rgba(207, 232, 255, 1) 0,
    rgba(143, 107, 170, 1) 100%,
    rgba(143, 107, 170, 1) 100%
  );
}
.images {
  width: 100px;
  margin: 0 auto;
}
img {
  width: 100%;
  box-shadow: 50%;
  border-radius: 50%;
}
.title > p {
  text-align: center;
  font-size: 20px;
}
.van-button {
  position: relative;
  width: 100px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
